<template>
	<view v-show="show">
		<view class="title" v-if="sheBeiList.length<=0">
			<view>正在发现附近的设备</view>
			<text>确保设备处于配网状态 ></text>
		</view>
		<view class="title"  v-if="sheBeiList.length>0" >
			<view>已成功添加1个设备</view>
			<button class="butt">完成</button>
		</view>
		<view class="title"  >
			<image src="../../../static/image/ClearData_03.jpg" class="img"></image>
			<view></view>
		
		</view>
		<view class="search">
			<view id="radar">
				<text></text>
				<text></text>
				<text></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				homeId: "",
				devId: "",
				show: true,
				sheBeiList: []
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.homeId = option.homeId;
			this.devId = option.devId;
		},
		onShow() {
			this.titles();
			this.zishebeiAdd();
		},

		methods: {
			titles() {
				uni.setNavigationBarTitle({
					title: "搜索设备"
				});
			},
			zishebeiAdd() {
				console.log("dsfd")
				uni.showLoading({
					title: this.show
				});
				try {
					const DeviceConfigModule = uni.requireNativePlugin("LJY-DeviceConfigModule"); //调用android中自定义的插件名称
					const ret = DeviceConfigModule.activatorSubDev({ //login表示自定义插件的函数名，第一个表示要传递的参数
						deviceId: this.devId
					});
					console.log(ret)
					uni.hideLoading(); //加载结束
					if (ret.code == 0) { //加载成功
						this.sheBeiList = ret.data
					} else { //加载失败
						uni.showToast({
							title: ret.msg,
							duration: 2000
						});
					}
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
					uni.showToast({
						title: '子设备添加失败',
						duration: 2000
					});
				}


			}
		},
	}
</script>

<style lang="less">
	.title {
		text-align: center;
		margin-top: 40rpx;

		view {}

		text {
			font-size: 20rpx;
			color: #8bc5fc;
		}
	}
	.img{
		width: 60rpx;
		height: 60rpx;
	}
	.butt {
		position: absolute;
		top: 80%;
		left: 15%;
		width: 70%;
		border-radius: 40rpx;
		background-color: #fe5927;
		color: #fcf4f0;
	}

	/* 扫描 */
	.search {
		padding-top: 20%;
		// width: 100%;
		// text-align: center;  
		box-sizing: border-box;
		margin-left: 20rpx;
	}

	#radar {
		position: relative;
	}

	#radar text {
		position: absolute;
		width: 600rpx;
		height: 600rpx;
		border: 10rpx solid #fff;
		box-shadow: 0 0 15rpx #fff;
		border-radius: 50%;
		animation: play 4s infinite linear;
		opacity: 0;
	}

	#radar text:nth-child(1) {
		animation-delay: 0s;
	}

	#radar text:nth-child(2) {
		animation-delay: 0.9s;
	}

	#radar text:nth-child(3) {
		animation-delay: 1.9s;
	}

	@keyframes play {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		25% {
			transform: scale(0);
			opacity: 0.5;
		}

		50% {
			transform: scale(1);
			opacity: 1;
		}

		75% {
			transform: scale(1.5);
			opacity: 0.5;
		}

		100% {
			transform: scale(2);
			opacity: 0;
		}
	}
</style>
